<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo/demo.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery.serializeObject.js"></script>
</head>
<body>
<!--<table id="dg">-->

<!--</table>-->
<div data-options="fit:true" class="easyui-layout" style="width:700px;height:350px;">
    <div data-options="region:'west',split:true" title="分类" style="width:200px;">
        <ul id="tree"></ul>
    </div>
    <div data-options="region:'center',title:'主页',iconCls:'icon-ok'">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">

            <div title="新闻" data-options="closable:false,iconCls:'icon-tip',cls:'pd3'">
                <table id="dg">

                </table>
            </div>

        </div>
    </div>
</div>
<div id="tb" style="padding:2px 5px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addNews()">Add</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="removeNews()"
       style="margin-right:20px">cut</a>
    keywords: <input id="keywords" class="easyui-textbox" style="width:110px">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchNews()">Search</a>
</div>
<script>
	$("#tree").tree({
		url: "http://localhost:3000/cate/list",
		method: "post",
		onClick(node){
			searchShow(node);
		}
	})
	function addNews() {
		var nodeData = $('#tree').tree('getSelected');
		if (nodeData && !nodeData.children) {
			var title = '添加新闻';
			var url = "addnews.html";
			var iframe = $(this).attr('iframe') == 1 ? true : false;
			addTab(title, url, null, iframe);
		} else {
			$.messager.show({
				title: 'My Title',
				msg: '请选择具体的 新闻类型',
				showType: 'fade',
				style: {
					right: '',
					bottom: '',
					textAlign: 'center'
				},
				textAlign: 'center'
			});
		}
	}
	
	function removeNews() {
		var data = $('#dg').datagrid('getSelections');
		if (data.length > 0) {
			var ids = [];
			for (var i in data) {
				ids.push(data[i]._id)
			}
			$.messager.confirm('Confirm', 'Are you sure you want to delete nodes?', function (r) {
				if (r) {
					$.ajax({
						url: 'http://localhost:3000/news/remove',
						data: {ids: ids.toString()},
						method: 'post',
						success: function (res) {
							console.log(res);
							$.messager.show({
								title: 'tip',
								msg: '新闻删除成功',
								timeout: 5000,
								showType: 'slide'
							});
							$('#dg').datagrid('reload');
						}
					})
				}
			})
		} else {
			$.messager.show({
				title: 'tip',
				msg: '请选择要删除的新闻',
				timeout: 5000,
				showType: 'slide'
			});
		}
	}
	
	function searchNews() {
		var keytext = $("#keywords").val();
		$.ajax({
			url: "http://localhost:3000/news/list",
			method: "post",
			data: {keywords: keytext}
		}).done(res => {
//			console.log(res);
			$("#dg").datagrid('loadData', res);
		})
	}
	//	var toolbar = [{
	//		text: 'Add',
	//		iconCls: 'icon-add',
	//		handler: function () {
	//			var nodeData = $('#tree').tree('getSelected');
	//			console.log(nodeData);
	//			if(nodeData&&!nodeData.children){
	//				var title = '添加新闻';
	//				var url = "addnews.html";
	//				var iframe = $(this).attr('iframe')==1?true:false;
	//				addTab(title,url,null,iframe);
	//            }else{
	//				$.messager.show({
	//					title:'My Title',
	//					msg:'请选择具体的 新闻类型',
	//					showType:'fade',
	//					style:{
	//						right:'',
	//						bottom:'',
	//                        textAlign:'center'
	//					},
	//                    textAlign:'center'
	//				});
	//            }
	//		}
	//	}, {
	//		text: 'Cut',
	//		iconCls: 'icon-cut',
	//		handler: function () {
	//			var data = $('#dg').datagrid('getSelections');
	//			var ids = [];
	//			for (var i in data) {
	//				ids.push(data[i]._id)
	//			}
	//			$.messager.confirm('Confirm', 'Are you sure you want to delete nodes?', function (r) {
	//				if (r) {
	//					$.ajax({
	//						url: 'http://localhost:3000/users/remove',
	//						data: {ids: ids.toString()},
	//						method: 'post',
	//						success: function (res) {
	//							console.log(222);
	//							$.messager.show({
	//								title: 'tip',
	//								msg: '用户删除成功',
	//								timeout: 5000,
	//								showType: 'slide'
	//							});
	//							$('#dg').datagrid('reload');
	//						}
	//					})
	//				}
	//			})
	//		}
	//	}, '-', {
	//		text: 'search',
	//		iconCls: 'icon-search',
	//		handler: function () {
	//			alert('save')
	//		}
	//	}];
	$('#dg').datagrid({
		method: "post",
		toolbar: '#tb',
		fit: true,
		pagination: true,
		url: 'http://localhost:3000/news/list',
		onDblClickRow: function (index, row) {
			editData(row);
		},
		columns: [[
			{field: 'ck', title: '全选', width: 200, align: 'center', checkbox: true},
			{field: 'title', title: 'title', width: 200, align: 'center'},
			{field: 'content', title: 'content', width: 200, align: 'center'},
			{field: 'commentCount', title: 'commentCount', width: 100, align: 'center'},
			{
				field: 'opt', title: '操作', width: 200, align: 'center',
				formatter: function (value, row, index) {
					return "<a class='a1' href='javascript:void(0)' onclick='changed(" + index + ")' style='margin:0 5px'>编辑</a> <a class='a2'  href='javascript:void(0)' onclick='remove(" + index + ")' style='margin:0 5x'>删除</a> <a class='a3'  href='javascript:void(0)' onclick='comment(" + index + ")' style='margin:0 5px'>评论</a>"
				}
			}
		]],
		onLoadSuccess: function (data) {
			$('.a1').linkbutton({toggle: true, group: 'g1'});
			$('.a2').linkbutton({toggle: true, group: 'g1'});
			$('.a3').linkbutton({toggle: true, group: 'g1'});
		}
	});


	function clearForm() {
		$('#ff').form('clear');
	}

	function progress() {
		var win = $.messager.progress({
			title: 'Please waiting',
			msg: 'Loading data...'
		});
		setTimeout(function () {
			$.messager.progress('close');
			$('#dg').datagrid('reload');
			$('#qq').datagrid('reload');
			slide();
		}, 2500)
	}

	function slide() {
		$.messager.show({
			title: 'tip',
			msg: 'data change successful',
			timeout: 5000,
			showType: 'slide'
		});
	}

	function editData(row) {
		addTab('添加新闻', "addnews.html", null, false);
		setTimeout(function () {
			$('#ff').form('load', row);
		}, 100)
	}


	function changed(index) {
		var row = $('#dg').datagrid('getData').rows[index];
//		console.log(row);
		addTab('添加新闻', "addnews.html", null, false);
		setTimeout(function () {
			$('#ff').form('load', row);
		}, 100)

	}

	function remove(index) {
		var row = $('#dg').datagrid('getData').rows[index];
		$.messager.confirm('Confirm', 'Are you sure you want to delete record?', function (r) {
			if (r) {
				var id = row._id;
				$.ajax({
					url: "http://localhost:3000/news/data/" + id,
					method: "delete",
				}).done(res => {
					$('#dg').datagrid('reload');
					slide();
				})
			}
		});

	}
	var newsId;
	var loadData;
	function comment(index) {
		var row = $('#dg').datagrid('getData').rows[index];
		newsId = row._id;
		if(loadData){
			loadData();
        }
		addTab("评论", "comment.html", null, false);
	}
	
	function addTab(title, href, iconCls, iframe) {
		var tabPanel = $('#wu-tabs');
		if (!tabPanel.tabs("exists", title)) {
			var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';

			if (iframe) {
				tabPanel.tabs('add', {
					title: title,
					content: content,
					closable: true,
					fit: true,
					iconCls: iconCls,
					cls: 'pd3'
				});
			} else {
				tabPanel.tabs('add', {
					title: title,
					href: href,
					closable: true,
					fit: true,
					iconCls: iconCls,
					cls: 'pd3'
				});
			}
		} else {
			tabPanel.tabs('select', title);
		}
	}

	//分类显示新闻
	function searchShow(node) {
		if (node) {
			$.ajax({
				url: "http://localhost:3000/cate/list/" + node._id,
				method: "post"
			}).done(res => {
				var ids = res;
				$.ajax({
					url: "http://localhost:3000/news/list",
					method: "post",
					data: {ids: ids}
				}).done(res => {
					$("#dg").datagrid('loadData', res);
				})
			})
		}
	}
</script>
</body>
</html>